import React, { useEffect, useState, useReducer } from "react";
import { useLocation } from "react-router-dom";
import { Form, Col, Input, Row, Button, Divider, Table } from "antd";
import axios from "axios";
import CancelModel from "../../../common/CancelModel";
import head from "../common/head.js";
import "./index.css";

const initialState = {
  cancelModelStatus: false,
};
const reducer = (state, action) => {
  console.log("模态框传入", action);
  switch (action.type) {
    case "changeCancelModel":
      return {
        ...state,
        cancelModelStatus: action.status,
      };
    default:
  }
};

export default function PoiManageList() {
  let location = useLocation();
  const { state } = location;
  const [store, dispatch] = useReducer(reducer, initialState);
  const [form] = Form.useForm();
  const [data, setData] = useState({});

  /**
   * 出餐
   */
  function produce(values) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: `http://localhost:9103/order/catering/${state.id}/produce`,
      data: {
        ...values,
      },
    }).then((data) => {
      setData(data.data);
    });
  }
  /**
   * 根据订单id 查询详细
   * @returns
   */
  useEffect(() => {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "get",
      url: `http://localhost:9103/order/catering/${state.id}`,
    }).then((data) => {
      setData(data.data);
    });
  }, []);
  /**
   * 拼接出餐 请求
   * @returns
   */
  function requstJson() {
    const items = data.items
      .filter((item) => {
        if (item.status !== "PLACED" && item.status !== "PREPARED") {
          return item;
        }
      })
      .map((item) => {
        return {
          seqNo: item.seqNo,
          version: item.version,
          quantityOnProduce: item.quantity.latest,
        };
      });

    const obj = {
      version: data.version,
      items: items,
    };

    return obj;
  }

  const onFinish = (values) => {
    produce(requstJson());
  };

  const columns = [
    {
      title: "序号",
      render: (item, re, index) => <div>{index + 1}</div>,
    },
    {
      title: "菜品名",
      dataIndex: ["productSnapshotOnPlace", "name"],
    },
    {
      title: "下单数量",
      dataIndex: ["quantity", "onPlace"],
    },
    {
      title: "计量单位",
      dataIndex: ["productSnapshotOnPlace", "unitOfMeasure"],
    },
    {
      title: "已出餐",
      dataIndex: ["quantity", "onProduce"],
    },
    {
      title: "本次出餐",
      dataIndex: this,
      render: (text) =>
        text.status === "PREPARING" ? (
          <>
            <Input
              defaultValue={text.quantity.latest}
              style={{ width: "15%" }}
              onChange={(e) => {
                text.quantity.latest = e.target.value;
              }}
            ></Input>
          </>
        ) : (
          ""
        ),
    },
  ];

  return (
    <div>
      <Form
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
        initialValues={{}}
      >
        <Row gutter={24}>
          {head(state, true)}
          {/** 菜品信息 */}
          <Col span={24}>
            <div className="headlineClass">菜品信息</div>
          </Col>

          <Divider />
        </Row>
        <Row style={{ width: "100%" }}>
          <Col span={24}>
            <Table
              pagination={false}
              dataSource={data.items}
              columns={columns}
              rowKey="id"
            />
          </Col>
        </Row>

        <Row>
          <Col span={24} style={{ textAlign: "right" }}>
            <Button
              onClick={() => {
                onFinish();
              }}
              className="ant-btn-color"
              style={{
                paddingLeft: 50,
                paddingRight: 50,
                background: "rgb(247, 211, 9)",
              }}
            >
              确认
            </Button>

            <Button
              style={{
                margin: "0 8px",
                paddingLeft: 50,
                paddingRight: 50,
                background: "rgb(236, 235, 235)",
              }}
              onClick={() => {
                dispatch({ type: "changeCancelModel", status: true });
              }}
            >
              取消
            </Button>
          </Col>
        </Row>
      </Form>

      <CancelModel store={store} dispatch={dispatch} path="/order/list" />
    </div>
  );
}
